<template>
    <h2>reactive创建对象类型</h2>
    <div class="person">
      <h2>一辆{{ car.brand }}车，价格{{ car.price }}</h2>
      <button @click="changePrice" >修改价格</button>
      <br/>
      <button @click="changeGameName" >修改游戏名称</button>
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
      <br/>
      <div><button @click="changeC" >修改值</button>{{ obj.a.b.c }}</div>
    </div>

</template>

<script lang="ts" setup name="lesson6 vue">
    import {reactive} from 'vue'//通过reactive来实现响应式对象数据
    //数据，对象类型，需要用reactive包起来
    let car = reactive({brand:'大众',price:1000})
    let games = reactive([{id:'g01',name:'暗黑4'}, {id:'g02',name:'WOW'}, {id:'g03',name:'星际争霸'} ])

    function changePrice(){
        car.price += 100
    }

    function changeGameName(){
        games[1].name="帝国时代4"
    }

    //reactive定义的对象类型数据，是深层次的
    let obj = reactive({a:{b:{c:100}}})
    function changeC(){
        obj.a.b.c +=10;
    }
</script>
<style scoped>
  .person{
      background-color: skyblue;
      border-radius: 3px;
      padding: 5px;
      margin: 2px 5px 2px 5px;
  }
  li{font-size: 15px;}
</style>